<template>
  <div class="login">
    <div>请登录</div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="userphone"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="userPwd"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>   
      </div>
    </van-form>
    <div>
      {{ msg }}
    </div>
  </div>
  <div @click="toerllo">没有账号，注册一个？</div>
</template>

<script lang="ts" setup>
  import { showToast } from 'vant';
import { ref } from "vue";
import { usersignin } from "@/api/index";
import { useRouter } from 'vue-router';
import { useStore } from 'vuex';

const userphone = ref("");
const userPwd = ref("");
const msg = ref("");
let router = useRouter()
let  store = useStore()

const onSubmit = () => {
    let userTser = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
    if (userTser.test(userphone.value)&&userPwd.value.length>5) {
  usersignin(userphone.value, userPwd.value)
    .then((result: any) => {
      msg.value = result.data.msg;
      if (result.data.msg == "请求成功") {
        
        showToast("登录成功");
        store.commit('updateUserData',result.data.data)
       localStorage.setItem('userData',JSON.stringify(result.data.data) )
        router.push({
            path:"/home"
        })
      } else {
        msg.value = "没有该用户,或者账号密码错误";
      }
    })
    .catch((err: any) => {
        msg.value = "网络错误";
      console.log(err);
    });
    }else{
        msg.value = "格式不正确";
    }
};
let toerllo=()=>{
  router.push({
    path:'/enllo'
  })
}
</script>

<style lang="less" scoped>
.login {
  padding-top: 80rem;
  > div:nth-child(1) {
    font-size: 16rem;
    font-weight: 700;
    padding-bottom: 20rem;
  }
}
</style>